<template>
  <section class="app-container">
    <!--展示区-->
    <div>
      <div class="van-search" style="background: #dddddd">
        <div class="van-search__content van-search__content--round">
          <div class="van-cell van-cell--borderless van-field">
            <div class="van-field__left-icon">
              <i
                class="van-icon van-icon-search"
                style="height: 1.1rem; color: #686869"
              ></i>
            </div>
            <div class="van-cell__value van-cell__value--alone">
              <div class="van-field__body">
                <input
                  ref="inpt"
                  v-model="sch"
                  style="font-size: 14px; width: 95%"
                  type="search"
                  placeholder="请输入产品名称"
                  class="van-field__control"
                  @search="onsearch()"
                  @input="jujao()"
                />
                <!-- <i class="finde" v-if="sch != ''">测试</i> -->
              </div>
            </div>
            <div
              class="van-field__left-icon"
              @click="resrch()"
              v-show="wordsly"
            >
              <i
                class=""
                style="
                  height: 1.1rem;
                  color: #686869;
                  font-weight: bold;
                  font-size: 15px;
                "
              >
                <b>╳</b></i
              >
            </div>
          </div>
        </div>
      </div>
    </div>
    <main>
      <p
        v-if="list == ''"
        style="width: 100%; text-align: center; color: #cccccc"
      >
        没有更过了
      </p>

      <ul
        v-for="item in list"
        :key="item.id"
        @click="redirectTo(`/raw/material-detail?id=${item.id}`)"
      >
        <li>
          <div class="top">
            <aside
              class="left"
              :style="{
                backgroundImage: `url(${item.gallery[0]})`,
                backgroundColor: !item.gallery[0] ? '#1E7BF4' : '',
              }"
            ></aside>
            <ul
              class="right"
              style="
                display: flex;
                flex-flow: column;
                height: auto;
                justify-content: space-between;
              "
            >
              <li class="kzs" style="width: 80%">
                <p style="margin: 0">
                  {{ item.name }}
                </p>
              </li>
              <li style="width: 80%" class="kzs">
                <p
                  style="
                    margin: 0;
                    font-size: 12px;
                    color: #b3b4b5;
                    height: 10px;
                    padding-bottom: 30px;
                  "
                >
                  {{ item.brief }}
                </p>
              </li>
              <li style="">
                <p style="margin: 0">
                  <span
                    v-for="(item, index) in item.keywords.split(',')"
                    :key="index"
                    :style="index != 0 ? 'margin-left:10px;' : null"
                    class="tag"
                  >
                    {{ item }}
                  </span>
                </p>
              </li>
              <li style="margin-top: 4px; font-size: 15px; color: #f70707">
                <div>
                  <span
                    >￥<b>{{ item.retailPrice }}</b></span
                  >
                </div>
                <div>
                  <a v-for="(ite, i) in item.goodLable" :key="i">{{ ite }}</a>
                </div>
              </li>
            </ul>
          </div>
        </li>
        <!-- <li>
          <div class="divider"></div>
        </li> -->
      </ul>
    </main>
  </section>
</template>
<script>
import { Icon, Tag, Field, Toast } from 'vant';
import { getRawGoodList, getRawShopInfo } from '@/api/api';
export default {
  name: '',
  props: {},
  data() {
    return {
      shopId: -1,
      wordsly: false,
      sch: '',
      list: '',
      query: {
        name: undefined,
        shopId: undefined,
        page: 1,
        limit: 10,
      },
    };
  },
  created() {
    this.query.shopId = this.$route.query.shopId || -1;
    this.init();
  },
  computed: {},
  methods: {
    // reqi() {
    //   if (this.list == '' && this.sch == '') {
    //     this.query.name = this.sch;
    //     this.init();
    //   }
    // },
    jujao() {
      if (this.sch != '') {
        this.wordsly = true;
      } else {
        this.wordsly = false;
      }
    },
    resrch() {
      this.sch = '';
      this.wordsly = false;
      this.query.name = this.sch;
      this.list = [];
      this.init();
    },

    onsearch() {
      let ipt = this.$refs.inpt;
      ipt.blur();
      // let txt = new RegExp('[\u4e00-\u9fa5]+');
      // if (!txt.test(this.sch)) {
      //   Toast('请输入正确的产品名称');
      //   return;
      // }
      this.query.name = this.sch;
      this.init();
    },

    async init() {
      getRawShopInfo({
        shopId: this.query.shopId,
      }).then((res) => {
        // console.log(res)
      });
      await getRawGoodList(this.query).then((res) => {
        this.list = res.data.data.list;
        console.log(this.list);
      });
    },
    strlen(str) {
      var len = 0;
      for (var i = 0; i < str.length; i++) {
        var c = str.charCodeAt(i);
        //单字节加1
        if ((c >= 0x0001 && c <= 0x007e) || (0xff60 <= c && c <= 0xff9f)) {
          len++;
        } else {
          len += 2;
        }
      }
      return len;
    },
    redirectTo(link) {
      this.$router.push({
        path: link,
      });
    },
  },
  components: {
    [Icon.name]: Icon,
    [Tag.name]: Tag,
    [Field.name]: Field,
  },
};
</script>
<style lang='scss' scoped>
.van-search {
  padding: 0.75rem 4%;
}

.van-search .van-cell {
  line-height: 1rem;
  font-size: 0.5rem;
  padding: 0 10px;
  padding-top: 0.26rem;
  padding-bottom: 0.1rem;
  background: #ffffff;
}

.van-search__content {
  border-radius: 0px !important;
  background: #dddddd !important;
}

.van-search,
.van-search__content {
  background: #f2f1f6 !important;
  //padding: 0.75rem 4%;
}

.van-search .van-cell {
  border: 1px solid #1d5ae8;
  border-radius: 0.5px;
  border-radius: 3px;
}

.kzs {
  width: 90%;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  p {
    width: 100%;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
.tag {
  display: inline-block;
  text-align: center;
  border-radius: 2px !important;
  padding: 1px 3px !important;
  font-size: 12px !important;
  color: #1d5ae8 !important;
  background-color: #e8eefd;
  letter-spacing: 1px;
}
// 搜索
.van-search {
  padding: 0.75rem 4%;
}

.van-search .van-cell {
  line-height: 1rem;
  font-size: 0.5rem;
  padding: 0 10px;
  padding-top: 0.26rem;
  padding-bottom: 0.1rem;
  background: #ffffff;
}
.van-search,
.van-search__content {
  background: #f2f1f6 !important;
}

.van-search .van-cell {
  border: 1px solid #1d5ae8;
  border-radius: 0.5px;
  border-radius: 3px;
}

.app-container {
  overflow-x: hidden;
  background-color: white;

  > main {
    > ul {
      margin: 20px 0;

      > li:nth-of-type(1) {
        padding: 0 16px;
        font-size: 12px;

        .top {
          height: 100px;
          display: flex;

          .left {
            //background-color: #1E7BF4;
            background-size: 100% 100%;
            width: 100px;
            height: 100px;
            min-height: 100px;
            min-width: 100px;
            background-repeat: no-repeat;
            box-sizing: border-box;
            border-radius: 8px;
          }

          .right {
            display: flex;
            flex-direction: column;
            margin-left: 20px;
            flex: 1;
            width: 80%;

            > li:nth-of-type(1) {
              flex: 1;
              color: black;
              font-size: 14px;
              font-weight: bolder;
            }

            > li:nth-of-type(2) {
              flex: 1;
              align-items: center;
              display: flex;

              > div {
                display: flex;
                height: 100%;
                align-items: center;
              }

              > div:nth-of-type(1) {
                flex: 1;

                > span {
                  color: red;
                  font-size: 14px;

                  > span {
                    font-size: 16px;
                    //font-weight: bolder;
                  }
                }
              }

              > div:nth-of-type(2) {
                flex: 3;
                overflow: hidden;
                padding-left: 10px;

                > a {
                  display: flex;
                  align-items: center;
                  height: 20px;
                  padding: 0 6px;
                  border: 1px solid #71c5fa;
                  color: #71c5fa;
                  align-items: center;
                  padding: 1px 2.5px;
                  text-overflow: ellipsis;
                  overflow: hidden;
                  white-space: nowrap;
                  //padding: 0 6px 2px 6px;
                  font-size: 11px;
                }
                > a:nth-of-type(2) {
                  margin: 0 auto 0 10px;
                }
              }

              > div:nth-of-type(3) {
                .van-icon {
                  padding-top: 1px;
                  width: 30px;
                  height: 30px;
                  font-size: 15px;
                  border: 1px solid #f40a0a;
                  border-radius: 50%;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                }
              }
            }
          }
        }

        .bottom {
          padding: 5px 0;
          display: flex;
          align-items: center;

          > span {
            font-size: 12px;
            color: rgb(136, 136, 136);
          }
        }
      }

      > li:nth-of-type(2) {
        /**分割快 */
        > .divider {
          display: block;
          width: 100%;
          height: 5px;
          min-width: 50px;
          margin: 0 auto;
          background-color: rgba(242, 242, 242, 1);
        }
      }
    }
  }
}
</style>
